<template>
  <div class="app-container">
    <el-form :inline="true">
      <!--      <el-form-item-->
      <!--        v-for="(item,index) in columnList"-->
      <!--        :key="index"-->
      <!--        :label="item.name"-->
      <!--      >-->
      <!--        <el-input></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="listExtendTableData">{{
            $t('search')
          }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="addRow"
        >{{ $t('insert') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="data"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item,index) in columnList"
        :key="index"
      >
        <template slot="header">
          {{ item.name }}<span class="el-icon-more" @click="seeColumn(item)"/>
        </template>
        <template slot-scope="scope">
          <el-input
            v-model="scope.row[item.keyName]"
          />
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('function')"
        width="220"
      >
        <template slot="header" slot-scope="scope">
          <el-button
            @click="addColumn"
          >{{ $t('add') }}
          </el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="addOrUpdateExtendTableData(scope.row)"
          >{{ $t('save') }}
          </el-button>
          <el-button
            v-if="scope.row.id"
            type="danger"
            @click="deleteExtendTableData(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogColumnVisible"
      top="15px"
    >
      <el-form
        label-width="20%"
        :model="extendTableColumn"
      >
        <el-form-item :label="$t('name')">
          <el-input v-model="extendTableColumn.name" :disabled="extendTableColumn.columnId"/>
        </el-form-item>
        <el-form-item :label="$t('keyName')">
          <el-input v-model="extendTableColumn.keyName" :disabled="extendTableColumn.columnId"/>
        </el-form-item>
        <el-form-item :label="$t('type')">
          <el-select
            v-model="extendTableColumn.type"
            :disabled="extendTableColumn.columnId"
          >
            <el-option
              v-for="(item,index) in columnTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('default')+$t('value')">
          <el-input
            v-model="extendTableColumn.defaultValue"
            :disabled="extendTableColumn.columnId"
          />
        </el-form-item>
        <el-form-item :label="$t('not')+$t('empty')">
          <el-switch
            v-model="extendTableColumn.notNull"
            :disabled="extendTableColumn.columnId"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogColumnVisible = false">{{ $t('cancel') }}</el-button>
        <el-button
          v-if="extendTableColumn.columnId"
          type="danger"
          @click="deleteExtendTableColumn"
        >{{ $t('delete') }}
        </el-button>
        <el-button
          type="primary"
          :disabled="extendTableColumn.columnId"
          @click="addOrUpdateColumn"
        >{{ $t('confirm') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  deleteExtendTableColumn,
  insertExtendTableColumn,
  listExtendTableColumn
} from '@/api/extend/extendTableColumnApi'
import {
  deleteExtendTableData,
  insertExtendTableData,
  listExtendTableData,
  updateExtendTableData
} from '@/api/extend/extendTableDataApi'
import { cancelNotice, listExtendTableColumnType, successNotice } from '@/util/common'
import { getCompanyId, getUserId } from '@/util/storage'

export default {
  name: 'ExtendTableInfo',
  data() {
    return {
      columnList: [],
      data: [],
      extendTableColumn: {},
      tableId: null,
      name: null,
      keyName: null,
      userId: getUserId(),
      companyId: getCompanyId(),
      dialogColumnVisible: false,
      columnTypeList: []
    }
  },
  created() {
    this.columnTypeList = listExtendTableColumnType(this)
    const param = this.$route.query
    this.tableId = param.tableId
    this.name = param.name
    this.keyName = param.keyName
    this.listExtendTableColumn()
    this.setTagsViewTitle()
  }, methods: {
    addOrUpdateColumn() {
      let promit
      if (this.extendTableColumn.columnId) {

      } else {
        promit = insertExtendTableColumn(this.extendTableColumn)
      }
      promit.then(res => {
        const { data, code } = res
        if (code === '200') {
          this.listExtendTableColumn()
          this.dialogColumnVisible = false
        }
      })
    },
    seeColumn(item) {
      this.extendTableColumn = item
      this.dialogColumnVisible = true
    },
    addColumn() {
      this.extendTableColumn = {
        tableId: this.tableId
      }
      this.dialogColumnVisible = true
    },
    addOrUpdateExtendTableData(item) {
      const json = item
      if (!item.id) {
        insertExtendTableData(this.keyName, json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            this.listExtendTableData()
            this.$emit('change', {})
          }
        })
      } else {
        updateExtendTableData(this.keyName, json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            this.listExtendTableData()
            this.$emit('change', {})
          }
        })
      }
    },
    deleteExtendTableData(item) {
      const that = this
      this.$confirm(this.$t('delete'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteExtendTableData(that.keyName, {
            id: item.id
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listExtendTableData()
            }
          })
        })
        .catch(function(e) {
          cancelNotice(that)
        })
    },
    deleteExtendTableColumn() {
      const that = this
      this.$confirm(this.$t('delete') + this.extendTableColumn.name, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteExtendTableColumn({
            columnId: that.extendTableColumn.columnId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listExtendTableColumn()
              that.dialogColumnVisible = true
            }
          })
        })
        .catch(function(e) {
          cancelNotice(that)
        })
    },
    addRow() {
      for (let i = 0, j = this.data.length; i < j; i++) {
        if (!this.data[i].id) {
          return
        }
      }
      const item = {}
      this.data.push(item)
    },
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.name}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    listExtendTableColumn() {
      listExtendTableColumn({
        tableId: this.tableId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.columnList = data
        }
        this.listExtendTableData()
      })
    },
    listExtendTableData() {
      listExtendTableData(this.keyName, {}).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.data = data
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
